<template>
  <div class="main">
    <el-form :model="from" label-position="top" :rules="rules" ref="fromRef">
      <div class="back_img"></div>
      <div class="login">
        
        <div class="login_title">系统登录</div>
        
        <div class="login_input">
          <el-form-item prop="userName">
            <el-input
              :prefix-icon="Avatar"
              placeholder="请输入用户名"
              v-model="from.userName"
            ></el-input>
          </el-form-item>
        </div>
        <div class="login_input">
          <el-form-item prop="passWord">
            <el-input
              :prefix-icon="Briefcase"
              placeholder="请输入密码"
              show-password
              v-model="from.passWord"
            ></el-input>
          </el-form-item>
        </div>

        <div>
          <el-input
          :prefix-icon="Briefcase"
            type="text"
            placeholder="请填写验证码"
            class="inputText"
            v-model="code"
          />
        </div>
        <div @click="changeCode()">
          <identify :identifyCode="identifyCode"></identify>
        </div>
        <!-- <el-button @click="login()">登录</el-button> -->
        <div class="login_button">
          <el-button @click="login()" class="loginButton">登录</el-button>
          <!-- <p @click="login">登录</p> -->
          <el-button @click="register" class="register">注册</el-button>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
import identify from "@/components/identify/identyfy.vue";

import { Avatar, Briefcase } from "@element-plus/icons-vue";
import { get } from "../../utils/request";
import { ElMessage } from "element-plus";
export default {
  name: "LoginComponent",

  data() {
    return {
      // 验证码初始值
      identifyCode: "m6a8", // 这个就是随机生成的验证码
      // 验证码的随机取值范围
      identifyCodes: "123456789abcdefghjkmnpqrstuvwxyz",

      loginState: sessionStorage.login,
      from: [],
      code:[]
    };
  },
  
  setup() {
    return { Avatar, Briefcase };
  },

  components: {
    identify,
  },

  mounted() {
    this.identifyCode = "";
    this.makeCode(this.identifyCodes, 4);
  },

  methods: {
    handleSubmit() {
      if (this.identifyCode != this.phone.code) {
        this.$toast("验证码不正确");
        this.changeCode(); // 改变验证码
      } else {
        this.$toast("验证码正确");
      }
    },
    // 点击验证码刷新验证码
    changeCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    },
    // 生成一个随机整数  randomNum(0, 10) 0 到 10 的随机整数， 包含 0 和 10
    randomNum(min, max) {
      max = max + 1;
      return Math.floor(Math.random() * (max - min) + min);
    },
    makeCode(data, len) {
      for (let i = 0; i < len; i++) {
        this.identifyCode += data[this.randomNum(0, data.length - 1)];
      }
    },
    register() {
      this.$router.push({
        name: "register",
      });
    },
    login() {
      get("/checkLogin", {
        userName: this.from.userName,
        password: this.from.passWord,
        userRole: "user",
      }).then((res) => {
        console.log("=========login===========");
        console.log(res);
        // if (this.identifyCode != this.phone.code) {
        //   this.$toast("验证码不正确");
        //   this.changeCode(); // 改变验证码
        // } else {
        //   this.$toast("验证码正确");
        // }
        console.log("=============")
        console.log(this.identifyCode)
        console.log("===========")
        console.log(this.code)
        if (res.data != null && this.identifyCode == this.code) {
          sessionStorage.login = true;
          sessionStorage.userName = this.userName;
          sessionStorage.telephone = res.data.telephone;
          sessionStorage.patient_id = res.data.userName;
          sessionStorage.real_name = res.data.realName;
          this.$router.push({
            name: "gua",
          }),
            ElMessage({
              message: "登录成功！",
              type: "success",
            });
        } else {
          this.$router.push({
            name: "login",
          }),
            ElMessage.error("身份证号，验证码，或密码错误！");
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.login {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #259b9e;
  opacity: 0.9;
  /* background: #65768557; */
  padding: 30px;
  width: 18%;
  border: 1px solid #eee;
  border-radius: 20px;
}

.login_title {
  text-align: center;
  padding-bottom: 20px;
  font-size: 20px;
}
.login_input {
  margin-top: 15px;
}
.login_input:nth-child(2) {
  margin-bottom: 20px;
}
.login_input:nth-child(3) {
  margin-top: 20px;
}
.login_button {
  margin-top: 20px;
  display: flex;
}
.login_button p {
  color: #fff;
  font-size: 15px;
  display: block;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  width: 100%;
  border: 1px solid #ddd;
}
.login_button p:nth-child(1) {
  background: #409eff;
  margin-right: 10px;
}
.login_button p:nth-child(2) {
  background: #67c23a;
  margin-left: 10px;
}
</style>
